import React, { startTransition } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import Tabs from './component/Tabbar'
import './App.css'
export default function App() {
  const navigate = useNavigate()

  const setRouteActive = (value) => {
    startTransition(() => {
      navigate(value)

    })
  }
  return (
    <div>
      <Outlet></Outlet>
      <TabBar className='bottom' onChange={value => setRouteActive(value)}>
        {Tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  )
}
